<template>
  <div id="login">
    <img
      class="logo"
      src="../../assets/images/entrance/logo.png"
      alt="">
    <form action="" id="login-form">
      <ul>
        <li>
          <div class="wrap">
            <label for="tel">手机号：</label>
            <input
              type="tel"
              id="tel"
              name="手机号"
              v-model.trim="tel"
              v-validate="'required|tel'">
          </div>
          <span v-show="VeeErrors.has('手机号')">{{ VeeErrors.first('手机号') }}</span>
        </li>
        <li>
          <div class="wrap">
            <label for="psw">密码：</label>
            <input
              type="password"
              id="psw"
              name="密码"
              v-model.trim="psw"
              v-validate="'required|alpha_num'">
          </div>
          <span v-show="VeeErrors.has('密码')">{{ VeeErrors.first('密码') }}</span>
        </li>
      </ul>

      <input
        type="button"
        value="登录"
        @click="login"
        :disabled="submitDisabled">

      <div class="forget">
        <router-link
          href=""
          tag="a"
          to="/forgetPSW">忘记密码？</router-link>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        tel: '',
        psw: '',
        submitDisabled: false
      }
    },
    methods: {
      login() {
        this.$validator.validateAll().then((result) => {

          if (result) {

            // 1 - form 验证通过

            this.$http.post({
              api: this.$api.USER_LOGIN,
              params: {
                mobile: this.tel,
                password: this.psw
              },
              success: function (res) {

                // 存储个人信息 tag

                console.log(res);
                // 用户id
                localStorage.setItem('id', res.data.data.id);
                // 角色类型
                localStorage.setItem('role_id', res.data.data.role_id);
                localStorage.setItem('token', res.data.data.token);
                localStorage.setItem('user_login', res.data.data.user_login);
                localStorage.setItem('qrcode_url', res.data.data.qrcode_url);
                localStorage.setItem('job_num', res.data.data.job_no);
                localStorage.setItem('avatar', res.data.data.avatar);
                localStorage.setItem('mobile', res.data.data.mobile);
                localStorage.setItem('account_number', this.$tool.qs.stringify(res.data.data.account_number));

                this.$tool.whenToast(
                  () => {

                    // 禁止重复点击登录按钮 （不再处理恢复，路由跳转后组件销毁了）

                    this.submitDisabled = true;
                  },
                  {
                    message: '登录成功，即将跳转...',
                    duration: -1
                  },
                  () => {

                    // 跳转

                    this.$router.push(this.$route.query.redirect || '/');
                  },2000
                );
              }.bind(this)
            });
          } else {

            // 2 - form 验证不通过

            this.$tool.whenToast(
              () => {
                // 暂时禁止登录按钮的点击

                this.submitDisabled = true;
              },
              {
                message: '请完善登陆信息',
                duration: -1,
                iconClass: 'public-toast-icon error'
              },
              () => {
                // 恢复登录按钮的点击

                this.submitDisabled = false;
              }, 2000
            );
          }
        });
      }
    }
  }
</script>

<style lang="scss">

  #login {
    position: fixed;
    width: $size-as-parent;
    height: $size-as-parent;
    background: $white;

    $icon-width: 12px;
    $row-height: 26px;
    $row-font-size: 1.6rem;
    $submit-height: 3.9rem;

    >.logo {
      width: 14.3rem;
      height: auto;
      margin: 3.9rem auto 6rem;
    }

    >form {
      padding: 0 4.8rem;

      >ul {
        >li {
          position: relative;
          padding-left: 1.2rem;
          border-bottom: 1px solid #4e4e4e;

          &:first-of-type {
            margin-bottom: 4.2rem;
          }

          >.wrap {
            display: flex;
            height: $row-height;
            line-height: $row-height;

            >label {
              min-width: 86px;
              font-size: $row-font-size;
              color: #333;
              text-indent: .8rem;
              padding-left: $icon-width;
              background: url("../../assets/images/entrance/icons.png") no-repeat center / $icon-width auto;
            }

            >input {
              flex: 1;
              font-size: $row-font-size;
              color: #000;
              min-width: 0; // hack
            }
          }

          >span {
            position: absolute;
            right: 0;
            top: $size-as-parent;
            color: #e4393c;
          }

          &:nth-of-type(1) > .wrap > label {
            background-position: 0 7px;
          }

          &:nth-of-type(2) > .wrap > label {
            background-position: 0 -110px;
          }
        }
      }

      >input {
        width: $size-as-parent;
        height: $submit-height;
        line-height: $submit-height;
        margin-top: 3rem;
        font-size: 1.8rem;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        background: #0097ff;
      }

      >.forget {
        margin-top: .9rem;
        text-align: center;

        >a {
          font-size: 1.5rem;
          color: #999;
        }
      }
    }
  }
</style>
